<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>应急信息管理_查询管理界面</title>
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public.css" type="text/css" />
        <!-- css -->
        <link href="<%=basePath%>jclient/css/public/select.css" rel="stylesheet" type="text/css" />
       <link href="<%=basePath%>jclient/css/public/style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public/bootstrap.min.css" />
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public/daterangepicker.css" />
        <link rel="stylesheet" href="<%=basePath%>jclient/css/public/query.css" />
		<link rel="stylesheet" href="<%=basePath%>jclient/css/public/baidumap.css" />
        <script src="jclient/javascript/modules/yjxxgl/yjxxgl_cxgl.js" type="text/javascript"></script>
		
    <style type="text/css">
    *{padding:0;margin:0;}
     body{
        background-color: #ffffff;
     }
     .td1{
      background-color: #5B9BD5;color: #FFFFFF;
       width:80px;text-align:center;
       line-height: 30px;height: 30px;
    }
     .td3{padding:0 5px ;}
    .td2{
      width: 120px;
      background-color: #EAEFF7;
      line-height: 30px;height: 30px;
      text-align: center;
    }
    .in1{
      background-color: #EAEFF7;
      width: 100%;
      height: 100%;
      border: none;
      text-align: center;
    } 
   
    </style>
  </head>
  <body bgcolor="#000"  style="height: 100%;">
   
    	<!-- main content -->
		<div class="main-content">

			<!-- map -->
			<div id="map">	
			</div><!-- map end -->
			
			<!-- panel bg -->
			<div class="panel-bg"  style="width: 544px">
				<!-- panel hide/show block -->
				<div class="panel-show-hide-block">
					<a href="javascript:void(0);" class="panel-block-normal">
						<i class="glyphicon glyphicon-arrow-right"></i>
						<span>隐藏</span>
					</a>
				</div><!-- panel hide/show block end -->
				
				<!-- panel content bg -->
				<div class="panel-bg-inner" style="width: 520px">
				</div><!-- panel content bg end -->
			</div><!-- panel bg end -->
			


			<!-- panel content -->
			<div class="panel-content" style="width: 510px">
				  <table style="border:0;padding-top: 10%; overflow:hidden;width: 500px"  > 
						  	<tr>
						  		<td  style="height: 40px;" valign="middle">
						  		     <div style="float:left;padding-bottom: 5px;font-size: 18px;">
							  			<!-- <select style="white-space:nowrap;width:50px; height: 25px;line-height: 25px;font-size:20px;margin:0px;padding: 0px;">
								  			<option>1</option>
								  			<option>2</option>
							  			</select>&nbsp;到
							  			<select style="white-space:nowrap;width:50px; height: 25px;line-height: 25px;font-size:20px;margin:0px;padding: 0px;">
							  				<option>1</option>
							  			</select> -->
							  			<div class="controls" style="width:119px;float:left;">
											<div class="input-group date datetime">
												<input id="begindate1" class="begindate form-control input-sm" style="width: 82px" size="16" type="text" value="">
													<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
											</div>
										</div>
										<div style="float:left ;text-align: center;font-size:14pt " >
											到
										</div>
										<div class="controls" style="width:119px;float:left;" >
											<div class="input-group date datetime">
												<input id="begindate1" class="begindate form-control input-sm" style="width: 82px" size="16" type="text" value="">
													<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
											</div>
										</div> &nbsp;
							  			<input type="text"class="scinput"  style="width: 135px;height: 30px"/>
						  			  </div>
						  			   <div class="eclipseBtn" style="width: 50px;float:left;">查询</div>
						  		</td>
						  	</tr>
						  	
						  	<tr>
						  		<td valign="top">
						  		   <div class="eclipseBtn" style="float: left;" onclick="show('szy');">水资源</div>
						  		   <div class="eclipseBtn" style="float: left;" onclick="show('shj');">水环境</div>
						  		   <div class="eclipseBtn" style="float: left;" onclick="show('gc');">工程</div>
						  		</td>
						  	</tr>
							<tr>
								<td>
	<div class="rightinfo">
    
    <div class="tools">
    
    	<ul class="toolbar">
        <li class="click"><span><img src="<%=basePath%>jclient/css/public/images/t01.png" style="position: relative;top: -7px;"/></span>添加</li>
        <li class="click"><span><img src="<%=basePath%>jclient/css/public/images/t02.png"style="position: relative;top: -7px;" /></span>修改</li>
        <li><span><img src="<%=basePath%>jclient/css/public/images/t03.png" style="position: relative;top: -7px;"/></span>删除</li>
        </ul>
    </div>
    
    
    <table class="tablelist">
    	<thead>
    	<tr>
        <th style="width:40px"><input name="" type="checkbox" value="" checked="checked"/></th>
        <th style="width: 70px">编号<i class="sort">
        <img src="<%=basePath%>jclient/css/public/images/px.gif" />
        </i>
        </th>
        <th style="width:300px"> 数据名录</th>
        <th>操作</th>
        </tr>
        </thead>
        <tbody>
   
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>001</td>
        <td>水体藻细胞密度</td>
        <td><a href="javascript:$('#bg').fadeIn(200);"  class="tablelink" onclick="">查看</a>     <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>002</td>
        <td>优势种群微囊藻比例</td>
        <td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>003</td>
        <td>微囊藻毒素的lr</td>
        <td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>004</td>
        <td>水温</td>
        <td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>005</td>
        <td>透明度</td>
        <td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>006</td>
        <td>每升水叶绿素a的含量</td>
        <td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>007</td>
        <td>每升水叶绿素a的含量</td>
        <td><a href="#" class="tablelink">查看</a>     <a href="#" class="tablelink">删除</a></td>
        </tr>        
        </tbody>
    </table>
    <div class="pagin">
    	<div class="message">共<i class="blue">100</i>条记录，当前显示第&nbsp;<i class="blue">1&nbsp;</i>页</div>
        <ul class="paginList">
        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>
        <li class="paginItem"><a href="javascript:;">1</a></li>
        <li class="paginItem current"><a href="javascript:;">2</a></li>
        <li class="paginItem"><a href="javascript:;">3</a></li>
        <li class="paginItem"><a href="javascript:;">4</a></li>
        <li class="paginItem"><a href="javascript:;">5</a></li>
        <li class="paginItem more"><a href="javascript:;">...</a></li>
        <li class="paginItem"><a href="javascript:;">10</a></li>
        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>
        </ul>
    </div>
    </div>
								</td>
							</tr>
						    </table>
			</div><!-- panel content end -->
			
		</div><!-- main content end -->
		 		<table id="bjsj"  cellpadding="6px" cellspacing="4px" style="display: none;">
			    	<tr>
			    		<td scope="row" class="td1">数据名称</td>
			    		<td class="td2"><input class="in1" value="水体藻细胞密度"></td>
			    		<td class="td1">时间</td>
			    		<td class="td2"><input class="in1" value="2014/8/1 14:30"></td>
			    	</tr>
			    	<tr>
			    		<td class="td1">数值</td>
			    		<td class="td2"><input class="in1"  value="1200" ></td>
			    		<td class="td1">单位</td>
			    		<td class="td2"><input class="in1"  value="万个/升" ></td>
			    	</tr>
			    	<tr>
			    		<td colspan="2"  class="td1" style="background-color: #5B9BD5;color: #FFFFFF;">事件名称</td>
			    		<!-- 点击修改功能未添加 -->
			    		<td colspan="2" class="td2"><a href="javascript:#yjsjgl_xjsj.jsp">.......编辑</a>
			    		</td>
			    	</tr>
			    	<tr>
			    		<td colspan="2"   class="td1" style="background-color: #FFC000;color: #FFFFFF;cursor: pointer;">关闭报警</td>
			    		<td colspan="2"  class="td1" id="click" onclick="javascript:$('#tip').fadeIn(200);" style="background-color: #C5E0B4;color: #FFFFFF;cursor: pointer;">编辑数据</td>
			    	</tr>
			    </table>
			     <div class="tip" id="tip" style="width: 400px;height: 200px; top:95px;border: 1px solid #cccccc;"">
    				<div class="tiptop" id="tiptop"><span>信息填写</span><a></a></div>
     				 <div class="tipinfo" id="tipinfo" style="margin-left:5px;padding-top:5px"  >
      					 <div class="tipright" id="tipright" style="padding:0px;padding-left: 2px;">
      						  <table  cellpadding="6px" cellspacing="4px" >
			    				<tr>
			    					<td scope="row" style="background-color: #FFFFFF;color:#000000 ;" class="td3" >水温</td>
			    					<td class="td2"><input class="in1" value="25℃" ></td>
			    					<td class="td3" style="background-color: #FFFFFF;color:#000000 ;">水体藻细胞密度</td>
			    					<td class="td2"><input class="in1"  value="1200万个/升"></td>
			    				</tr>
			    				<tr>
			    					<td class="td3" style="background-color: #FFFFFF;color:#000000 ;">透明度</td>
			    					<td class="td2"><input class="in1" value="50cm" ></td>
			    					<td class="td3" style="width:91;background-color: #FFFFFF;color:#000000 ;">原水输配线状态</td>
			    					<td class="td2"><input class="in1" value="良好"></td>
			    				</tr>
			    				<tr>
			    					<td colspan="2"  class="td3" style="background-color: #FFFFFF;color:#000000 ;">引滦线工程设施状态</td>
			    					<td colspan="2" class="td2">
			    					<input class="in1" value="良好">
			    					</td>
			    				</tr>
				   			 </table>
	        			</div>
      				</div>
        			<div class="tipbtn" id="tipbtn" style="margin:20px 0px 10px 0px;text-align: center;">
      				  <input name="" type="button"  class="sure" id="sure" value="确定" />&nbsp;
      				  <input name="" type="button"  class="cancel" id="cancel" value="取消" />
     			   </div>
    			</div>
    			
    	<!-- 弹出记录表表格 -->
    	<div class="tip" id="bg" style="width: 530px;height: 430px" > 
			<div class="tiptop" id="jlbtop"><span>
				水体藻细胞密度&nbsp;的所有记录文件
			</span><a></a></div>
		 <div class="tools">
    			<ul class="toolbar">
        			<li class="click"><span><img src="<%=basePath%>jclient/css/public/images/t01.png" style="position: relative;top: -7px;"/></span>添加</li>
        			<li class="click"><span><img src="<%=basePath%>jclient/css/public/images/t02.png"style="position: relative;top: -7px;" /></span>修改</li>
       				 <li><span><img src="<%=basePath%>jclient/css/public/images/t03.png" style="position: relative;top: -7px;"/></span>删除</li>
       		 </ul>
  	  </div>

    	<table class="tablelist">
    	<thead>
    	<tr>
        <th style="width:40px"><input name="" type="checkbox" value="" checked="checked"/></th>
        <th style="width: 70px">年限<i class="sort">
        <img src="<%=basePath%>jclient/css/public/images/px.gif" />
        </i>
        </th>
        <th style="width:300px">表格名录</th>
        <th>操作</th>
        </tr>
        </thead>
        <tbody>
   
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>2012</td>
        <td>2012于桥水库巡视检查记录表</td>
        <td>
        	<a href="#" class="tablelink" >预览</a> 
        	<a href="#" class="tablelink">下载</a>
            <a href="#" class="tablelink">删除</a>
        </td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>2013</td>
        <td>2013于桥水库巡视检查记录表</td>
        <td><a href="#" class="tablelink">预览</a>
        	<a href="#" class="tablelink">下载</a>
             <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>2014</td>
        <td>2014于桥水库巡视检查记录表</td>
        <td><a href="#" class="tablelink">预览</a>
        	<a href="#" class="tablelink">下载</a>
             <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>2015</td>
        <td>2015于桥水库巡视检查记录表</td>
        <td><a href="#" class="tablelink">预览</a>
        	<a href="#" class="tablelink">下载</a>
             <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>2012</td>
        <td>2012于桥水库卫星遥测蓝藻面积数据记录表</td>
        <td><a href="#" class="tablelink">预览</a>
        	<a href="#" class="tablelink">下载</a>
             <a href="#" class="tablelink">删除</a></td>
        </tr>        
        <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td>2013</td>
        <td>2013于桥水库卫星遥测蓝藻面积数据记录表</td>
        <td><a href="#" class="tablelink">预览</a>
        	<a href="#" class="tablelink">下载</a>
             <a href="#" class="tablelink">删除</a></td>
        </tr>        
        </tbody>
    </table>
    <div class="pagin">
    	<div class="message">共<i class="blue">100</i>条记录，当前显示第&nbsp;<i class="blue">1&nbsp;</i>页</div>
        <ul class="paginList">
        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>
        <li class="paginItem"><a href="javascript:;">1</a></li>
        <li class="paginItem current"><a href="javascript:;">2</a></li>
        <li class="paginItem"><a href="javascript:;">3</a></li>
        <li class="paginItem"><a href="javascript:;">4</a></li>
        <li class="paginItem"><a href="javascript:;">5</a></li>
        <li class="paginItem more"><a href="javascript:;">...</a></li>
        <li class="paginItem"><a href="javascript:;">10</a></li>
        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>
        </ul>
    	</div>
  		<div class="tipbtn" style="margin: 0 95 ">
      		<input name="" type="button"  class="sure" id="yes" value="确定" />&nbsp;
      		 <input name="" type="button"  class="cancel" id="no" value="取消" />
     	</div>
     		
    </div>
		<!-- javascript -->
		<script src="<%=basePath%>jclient/javascript/public/jquery.min.js"></script>
        <script src="<%=basePath%>jclient/javascript/public/bootstrap.min.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/moment.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/highcharts.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/themes/sand-signika.js"></script>
		<script src="<%=basePath%>jclient/javascript/public/baidumap.js"></script>
		<!-- javascript -->
		<script src="<%=basePath%>jclient/javascript/public/daterangepicker.js"></script>
		<script>
			var ts;
			var markerArr, rainMarker;
			$(function(){
			//控制彈出窗口
 	 			$("#tiptop a").click(function(){
 				$("#tip").fadeOut(200);
				});

 				 $("#sure").click(function(){
 				 $("#tip").fadeOut(100);
					});

 				 $("#cancel").click(function(){
 				 $("#tip").fadeOut(100);
					});
			//控制表格弹出窗口
			$("#jlbtop a").click(function(){
 				$("#bg").fadeOut(200);
				});

 				 $("#yes").click(function(){
 				$("#bg").fadeOut(100);
					});

 				 $("#no").click(function(){
 				$("#bg").fadeOut(100);
					});
					// 日期选择
				$('.begindate').val(moment().format('YYYY-MM-DD'));
				$('.begindate').daterangepicker({ singleDatePicker: true }, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                 });
				// 显示/隐藏面板
				$('.panel-show-hide-block a').click(function(){
					if($(this).hasClass('panel-block-normal')){
						/*$('.panel-content').animate({left:'+=420px'}, 200);
						$('.panel-bg').animate({left:'+=420px'}, 200);
						$('.panel-show-hide-block').animate({left:'+=420px'}, 200);*/
						
						// 解决IE及chrome浏览器定位出现问题的BUG
						$('.panel-content').animate({width:'0px'}, 200);
						$('.panel-bg').animate({width:'24px'}, 200);
						$('.panel-bg .panel-bg-inner').hide();
						
						$(this).find('i').attr('class','glyphicon glyphicon-arrow-left');
						$(this).find('span').text('显示');
						$(this).removeClass('panel-block-normal').addClass('panel-block-highlight');
					}else{
						/*$('.panel-content').animate({left:'-=420px'}, 200);
						$('.panel-bg').animate({left:'-=420px'}, 200);
						$('.panel-show-hide-block').animate({left:'-=420px'}, 200);*/
						
						// 解决IE及chrome浏览器定位出现问题的BUG
						$('.panel-content').animate({width:'510px'},200);
						$('.panel-bg .panel-bg-inner').show();
						$('.panel-bg').animate({width:'544px'}, 200);
						
						$(this).find('i').attr('class','glyphicon glyphicon-arrow-right');
						$(this).find('span').text('隐藏');
						$(this).addClass('panel-block-normal').removeClass('panel-block-highlight');
					}
				});
				
				
			
				// 加载百度地图
        		ts = $('#map').baidumap({
        			point : {lat: 118.50, lng:39.19},		//114.534436,36.564449
        			zoom : 9,
					scrollWheelZoom : false,
        			navigationCtl : false,
        			boundary : { show: true, areaName: '天津市', setViewport: false }
        		});
        		// 闪烁标注点
				var infoOpts = {
					width : 400,     // 信息窗口宽度    
					height: 200,     // 信息窗口高度   
					offset: ts.Size(0, 0),	// 信息窗口位置偏移量
					title : "<b>于桥水库2015年12月22日8时预警事件</b>"  // 信息窗口标题 
				};
				var content = fillInfoWindow();
				markerArr = ts.addmarkers([
					{
						point : {lat: 117.5052670000, lng:40.0471370000 },//114.203788,36.711741  114.074432,36.74645
        				label : { text:"于桥水库", offset:{ x:-8, y:20 } },
						icon : { url:'<%=basePath%>jclient/images/publicimg/icon1_warning.gif', width:120, height:120},
						infoWinEventName : 'click',
						infoWindow: ts.addInfoWindow(content, infoOpts),
						click : function() {
							//alert("点击区域，重新现实信息");
						}
        			}
				]);
				ts.showBoundary("宝坻区",false,false,"##BFD87C");
				ts.showBoundary("武清区",false,false,"#F0C195");
				ts.showBoundary("蓟县",false,false,"#A8CEA5");
				
				ts.showBoundary("西青区",false,false,"#F0C195");
				ts.showBoundary("东丽区",false,false,"#BED881");
				ts.showBoundary("北辰区",false,false,"#D5C22A");
				ts.showBoundary("宁河县",false,false,"#A7CD72");
				ts.showBoundary("静海县",false,false,"#E99CA4");
				ts.showBoundary("津南区",false,false,"#5D9AB4");
				ts.showBoundary("滨海新区",false,false,"#E8FABF");
			});
			
			function fillInfoWindow(){
				// 信息内容
				var contextHtml = "<div style='font-size:12px;'>";
				contextHtml += "<hr /> <table  cellpadding=\"6\" cellspacing=\"4\" >";
				contextHtml +=$("#bjsj").html();
				contextHtml += "</table></div>";
				return contextHtml;
			}
			
			
		</script>
  </body>
</html>
